<template>
  <div class="galgame-scene" :style="{ backgroundImage: `url(${backgroundImageUrl})` }">
    <el-popover :visible="popoverVisible" placement="right" :width="300">

      <template #reference>
        <div class="character">
          <img :src="characterImageUrl" alt="Character" @click="changeCharacterImage"
            style="display: block; margin: 0 auto;" />
        </div>
      </template>
      <h1 slot="content">{{ popoverContent }}</h1>
    </el-popover>
    <!-- <el-button class="m-2" @click="popoverVisible = !popoverVisible">Manual to activate</el-button>
    <el-button class="m-2" @click="sendMessage">Send Message</el-button> -->

    <!-- <div class="output" style="display: none;">{{ outputText }}</div> -->
    <!-- 绑定到outputVisible -->
    <div class="output" v-show="outputVisible">{{ outputText }}</div>
    <el-input class="input" v-model="inputText" @keyup.enter="handleEnter" placeholder="Enter text..." />
  </div>
</template>

<script>
const IMG_GF_NORMAL = 'img/person/gf-normal.png';
const IMG_GF_HAPPY = 'img/person/gf-happy.png';
const IMG_GF_ANGRY = 'img/person/gf-angry.png';

import { ElNotification } from 'element-plus'


export default {


  data() {
    return {
      backgroundImageUrl: 'img/background/晴朗天气.png',
      characterImageUrl: IMG_GF_NORMAL,
      inputText: '',
      outputText: '',
      popoverVisible: false,
      popoverContent: "默认文本"
    };
  },
  mounted() {
    // on connection
    this.sockets.subscribe('connect', () => {
      console.log('socket connected');
      this.showNotification({
        title: '已经与服务器建立连接！',
        content: '您可以开始聊天了！'
      });
    });

    // on disconnection
    this.sockets.subscribe('disconnect', () => {
      console.log('socket disconnected');
      this.showNotification({
        title: '与服务器断开连接！',
        content: '请检查网络连接！'
      });
    });

    // on custom event
    this.sockets.subscribe('notification', (data) => {
      console.log('message received:', data);
      this.showNotification(data);
    });


    this.sockets.subscribe('bot_reply', (data) => {
      // console.log('message received:', data);
      // this.updatePopoverContent(data);
      let emotion = data.emotion;
      let content = data.content;
      this.changeCharacterImage(emotion);
      this.updatePopoverContent(content);
    })

    this.sockets.subscribe('changeBackground', (data) => {
      var img_url = data;
      this.changeBackgroundImage(img_url);
    })


  },
  methods: {
    showNotification(data) {
      console.log('showNotification:', data);
      ElNotification({
        title: data.title,
        message: data.content,
        position: 'bottom-left',
      })
    },

    showBotReply(data) {
      this.outputVisible = true;
      this.outputText = data;
      setTimeout(() => {
        this.outputText = '';
        this.outputVisible = false;
      }, 8000);
    },

    sendMessage() {
      // 发送一个名为 'message' 的事件，数据为 'Hello, World!'
      this.$socket.emit('message', 'Hello, World!');
    },

    sendUserInput(user_input) {
      this.$socket.emit('user_input', user_input);
    },

    handleEnter() {
      // // Handle the enter key press event, e.g., trigger an action or send the input text to the backend
      // this.outputText = this.inputText; // For demonstration, echoing back the input text
      // this.inputText = ''; // Clear the input after handling
      // .output display block
      this.outputVisible = true;
      var user_input = this.inputText;
      this.sendUserInput(user_input);

      this.outputText = user_input;
      this.inputText = '';
      // 3 seconds later, hide the output
      setTimeout(() => {
        this.outputText = '';
        this.outputVisible = false;
      }, 5000);
      // this.updatePopoverContent("回复" + user_input);

    },
    changeCharacterImage(emotion) {

      console.log('change emotion:', emotion);
      if (emotion === 'CALM') {
        this.characterImageUrl = IMG_GF_NORMAL;
      } else if (emotion === 'HAPPY') {
        this.characterImageUrl = IMG_GF_HAPPY;
      } else if (emotion === 'ANGRY') {
        this.characterImageUrl = IMG_GF_ANGRY;
      } else {
        console.log('Unknown emotion:', emotion);
      }
    },
    updatePopoverContent(content) {
      this.popoverVisible = true;
      this.popoverContent = content;
      // 5 seconds later, hide the popover
      setTimeout(() => {
        this.popoverVisible = false;
      }, 5000);
    },
    changeBackgroundImage(img_url) {
      this.backgroundImageUrl = img_url;
    }
  }
};
</script>

<style scoped>
.galgame-scene {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.character {
  width: 500px;
  /* 竖直居中 */
  position: absolute;
  bottom: 0;
  /* transform: translateY(-50%); */
  /* 左右居中 */
  left: 50%;
  transform: translateX(-50%);


}

.output {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  /* max-width: 00px; */
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  font: 40px "Microsoft YaHei", sans-serif;
  border-radius: 10px;
}

.input {
  /* 水平居中，距离底部 20px */
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 400px;
  /* 字体 圆润一些 */
  font: 25px "Microsoft YaHei", sans-serif;
  line-height: 50px;
  height: 50px;
}
</style>
